<template>
	<view>
		<view class="level">
			<view class="menber_top">
				<view class="menber_info">
					<image :src="cdn(info.avatar)" class="menber_avator z-margin-r-24" mode="" />
					<view class="menber_info_right">
						<view class="namebox">
							<view class="z-margin-r-32">{{ info.nickname }}</view>

							<view class="namebox_text z-font-22" v-if="info.plusInfo.is_plus > 0">
								<image src="../../static/index/vip.png" class="vip" mode="" />
								<view class="plusname z-flex">{{ info.plusInfo.plusname }}</view>
							</view>
						</view>
						<view class="text_999 z-font-24 z-margin-t-16" v-if="info && info.plusInfo.is_plus > 0">有效期至{{ tool.formatTime(info.plusInfo.plustime) }}</view>
						<view class="text_999 z-font-24 z-margin-t-16" v-else>开通会员，即可享受订单折扣</view>
					</view>
				</view>
			</view>
			<view class="menber_content z-padding-32">
				<view
					:class="plus_id===item.id?'active z-radius-32 z-padding-32':'price_box z-radius-32 z-padding-32'"
					@tap="chose(item.id)"
					v-for="(item,index) in plus"

				>
					<view class="price_box_left">
						<view class="price_box_left_left z-margin-r-16">
							<view class="realmoney yellow">
								<view class="z-margin-t-8">￥</view>
								<view class="z-font-w bigsize">{{ item.price }}</view>
							</view>
							<view class="z-font-24 z-pading-tb-8 z-margin-t-8 z-padding-lr-8 z-radius-8 line_through" :class="plus_id===item.id? 'yellowed  ':'fakemoney text_999 '">
								￥{{ item.original_price }}
							</view>
						</view>
						<view class="price_box_left_right">
							<view class="z-font-30">{{ item.name }}</view>
							<view class="z-font-20 text_999 z-margin-t-16">开通会员下订单可享受{{ item.discount / 10 }}折优惠</view>
						</view>
					</view>
					<view class="z-radius-32 z-padding-8 z-font-w z-font-26 z-margin-l-24" :class="plus_id==item.id?'newbtn ':'price_box_right'" @tap="pay(item.id)">
						立即开通
					</view>
				</view>

				<view class="read_box" @tap="readclick">
					<image src="../../static/login/choose.png" v-if="agree==0" class="choose_img" mode="" />
					<image src="../../static/login/choosed.png" v-else class="choose_img" mode="" />
					<view class="z-font-24 z-margin-l-16">
						开通前请阅读
						<text class="green" @tap="infoTap('plus_info_id','充值会员须知')">《充值会员须知》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';

export default {
	data() {
		return {
			plus_id: '',
			agree: 0,
			plus: [],
			info: '',
			safeBottom: `padding-bottom:100px`
		};
	},
	onLoad(options) {},
	onShow() {
		this.getInfo()
	},
	methods: {
		chose(e) {
			this.plus_id = e
		},
		readclick() {
			this.agree = this.agree == 0 ? 1 : 0
		},
		infoTap(info,name) {
			let id = uni.getStorageSync('config').plus_info_id
			this.util.skip('/service/info/info?id=' + id + '&name=' + name);
		},
		pay(e) {
			if (this.agree === 0) return this.util.toast('请阅读并同意《充值会员须知》');
			this.plus_id = e
			http.post('plus/plus', {
				type: 'pay',
				paytype: 0,
				id: this.plus_id
			}).then((res) => {
				uni.requestPayment({
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: (res) => {
						this.util.toast('支付成功');
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('changePlus');
						setTimeout(() => {
							this.getInfo();
						}, 1000);
					},
					fail: (res) => {
						this.util.toast('支付失败');
					}
				});
			});
		},
		getInfo() {
			http.post('plus/plus').then((res) => {
				this.plus = res.data,
				this.plus_id = res.data[0].id
			});
			http.post('index/userindex', '').then((res) => {
				this.info = res.data
			});
		}
	}
};
</script>

<style>
.level {
	padding-bottom: 100rpx;
	overflow-y: auto;
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	box-sizing: border-box;
}
.level::-webkit-scrollbar {
	display: none;
}
.menber_top {
	width: 750rpx;
	background: linear-gradient(180deg, #c1ebc8 0%, #f0fec8 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	padding: 32rpx 32rpx 100rpx;
	box-sizing: border-box;
}

.menber_info {
	display: flex;
	align-items: center;
}

.menber_avator {
	width: 95rpx;
	height: 95rpx;
	border-radius: 50%;
}

.menber_info_right {
	display: flex;
	flex-direction: column;
	height: 95rpx;
	justify-content: space-around;
}

.menber_content {
	background-color: #fff;
	position: relative;
	box-sizing: border-box;
	margin-top: -50rpx;
	border-radius: 40rpx;
}

page {
	background-color: #fff;
}

.price_box {
	border: 10rpx solid #edf1f4;
	width: 686rpx;
	margin: 30rpx auto;
	box-sizing: border-box;
	background-color: #f5f7f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.active {
	border: 10rpx solid #62cb81;
	width: 686rpx;
	margin: 30rpx auto;
	box-sizing: border-box;
	background-color: #e0fccc;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.yellow {
	color: var(--mainmoneycolor);
}
.yellowed {
	background-color: rgba(255, 150, 0, 0.3);
	color: var(--mainmoneycolor);
}

.line_through {
	text-decoration: line-through;
}

.realmoney {
	display: flex;
	align-items: center;
}

.price_box_left {
	display: flex;
	align-items: center;
	flex: 3;
}

.price_box_left_left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bigsize {
	font-size: 50rpx;
}

.fakemoney {
	background-color: #edf1f4;
}

.price_box_left_right {
	display: flex;
	flex-direction: column;
}

.price_box_right {
	background-color: #fff;
	flex: 1;
	text-align: center;
}

.newbtn {
	flex: 1;
	text-align: center;
	background: linear-gradient(270deg, #a8bbff 0%, #62cb81 100%);
	color: #fff;
}

.read_box {
	display: flex;
	align-items: center;
}

.choose_img {
	width: 32rpx;
	height: 32rpx;
}

.namebox {
	display: flex;
	align-items: center;
}

.vip {
	width: 50rpx;
	height: 50rpx;
}
.namebox_text {
	display: flex;
	align-items: center;
}

.plusname {
	background: linear-gradient(90deg, #ffb40e 0%, #ff5942 100%);
	color: #fff;
	height: 46rpx;
	border-radius: 0 24rpx 24rpx 0;
	padding: 0 24rpx 0 40rpx;
	margin-left: -30rpx;
}
.vip {
	width: 50rpx;
	height: 50rpx;
	z-index: 10rpx;
	position: relative;
}
</style>
